<template>
  <yd-layout>
    <h1 class="demo-logo"><img src="http://static.ydcss.com/ydui/img/logo.png"></h1>
    <h2 class="demo-detail-title">一只基于Vue2.x的移动端&微信UI。 -YDUI Touch</h2>

    <yd-grids-group rows="4">
      <yd-grids-item v-for="item in list"
                     :link="item.link">
        <i slot="icon"
           :class="item.icon"></i>
        <span slot="text">{{item.name}}</span>
      </yd-grids-item>
    </yd-grids-group>
  </yd-layout>
</template>

<script type="text/babel">
export default {
  data() {
    return {
      list: [
        { icon: 'demo-icons-button', name: 'Button', link: '/button' },
        { icon: 'demo-icons-dialog', name: 'Dialog', link: '/dialog' },
        { icon: 'demo-icons-cell', name: 'Cell', link: '/cell' },
        { icon: 'demo-icons-icons', name: 'Icons', link: '/icons' },
        { icon: 'demo-icons-grids', name: 'Grids', link: '/grids' },
        { icon: 'demo-icons-list', name: 'List', link: '/list' },
        { icon: 'demo-icons-badge', name: 'Badge', link: '/badge' },
        { icon: 'demo-icons-tabbar', name: 'AsideBar', link: '/asidebar' },
        { icon: 'demo-icons-tabs', name: 'Tab', link: '/tab' },
        { icon: 'demo-icons-actionsheet', name: 'ActionSheet', link: '/actionsheet' },
        { icon: 'demo-icons-sendcode', name: 'SendCode', link: '/sendcode' },
        { icon: 'demo-icons-progressbar', name: 'ProgressBar', link: '/progressbar' },
        { icon: 'demo-icons-keyboard', name: 'KeyBoard', link: '/keyboard' },
        { icon: 'demo-icons-slider', name: 'Slider', link: '/slider' },
        { icon: 'demo-icons-spinner', name: 'Spinner', link: '/spinner' },
        { icon: 'demo-icons-cityselect', name: 'CitySelect', link: '/cityselect' },
        { icon: 'demo-icons-countup', name: 'CountUp', link: '/countup' },
        { icon: 'demo-icons-rate', name: 'Rate', link: '/rate' },
        { icon: 'demo-icons-countdown', name: 'CountDown', link: '/countdown' },
        { icon: 'demo-icons-popup', name: 'Popup', link: '/popup' },
        { icon: 'demo-icons-rollnotice', name: 'RollNotice', link: '/rollnotice' },
        { icon: 'demo-icons-input', name: 'Input', link: '/input' },
        { icon: 'demo-icons-flexbox', name: 'FlexBox', link: '/flexbox' },
        { icon: 'demo-icons-cr', name: 'C&R', link: '/cr' },
        { icon: 'demo-icons-backtop', name: 'BackTop', link: '/backtop' },
        { icon: 'demo-icons-accordion', name: 'Accordion', link: '/accordion' },
        { icon: 'demo-icons-datetime', name: 'DateTime', link: '/datetime' },
        { icon: 'demo-icons-lightbox', name: 'LightBox', link: '/lightbox' },
        { icon: 'demo-icons-timeline', name: 'TimeLine', link: '/timeline' },
        { icon: 'demo-icons-step', name: 'Step', link: '/step' },
        { icon: 'demo-icons-checklist', name: 'CheckList', link: '/checklist' },
        { icon: 'demo-icons-search', name: 'Search', link: '/search' },
        { icon: 'demo-icons-scrollnav', name: 'ScrollNav', link: '/scrollnav' },
        { icon: 'demo-icons-scrolltab', name: 'ScrollTab', link: '/scrolltab' },
        { icon: 'demo-icons-preview', name: 'Preview', link: '/preview' },
        { icon: 'demo-icons-preview', name: 'ImagePreview', link: '/imagepreview' },
        { icon: 'demo-icons-preview', name: 'CanvasBoard', link: '/canvasboard' },
        { icon: 'demo-icons-datetime', name: 'Picker', link: '/picker' }
      ]
    };
  }
};
</script>
